<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="事迹上报">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="事迹类型">
        <el-select v-model="form.region" placeholder="请选择你上报的事迹类型">
          <el-option label="火灾类型" value="shanghai" />
          <el-option label="救水类型" value="beijing" />
          <el-option label="抢劫类型" value="guizhou" />
          <el-option label="侵害国家集体的财产或者其他人身财产权益" value="hangzhou" />
          <el-option label="主动协助公安司法机关侦破重大刑事案件或者协助追捕犯罪嫌疑人逃犯" value="jiangxi" />
          <el-option label="其他类型" value="xizang" />
        </el-select>
      </el-form-item>
      <el-form-item label="事迹时间">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="选择事迹日期" style="width: 100%;" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="选择事迹时间" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="速递">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <!-- <el-form-item label="事件地点">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group> -->
      <!-- </el-form-item> -->
      <el-form-item label="来源">
        <el-radio-group v-model="form.resource">
          <el-radio label="学校" />
          <el-radio label="社区" />
          <!-- <el-radio label="" /> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="事迹介简">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('提交成功!')
    },
    onCancel() {
      this.$message({
        message: '取消!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

